<template>
<div class="wrapper">
    <!-- Header with Back Button and Title -->
    <header class="header">
      <i class="fa fa-arrow-left back-button" @click="goBack"></i>
      <h2>个人信息</h2>
    </header>

    <!-- Profile Picture Section -->
    <div class="profile-picture-section">
      <div class="profile-picture">
        <!-- 头像动态绑定 -->
        <img
          :src="userInfo.userImg || 'https://glut-elm.oss-cn-guangzhou.aliyuncs.com/photo/img/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/moren.jpg'"
          alt="个人头像"
        />
        <div class="camera-icon">
          <i class="fa fa-camera"></i>
        </div>
      </div>
    </div>

    <!-- Info Section -->
    <div class="info-section">
      <!-- 用户名（只读） -->
      <div class="info-item">
        <span class="label">用户名</span>
        <span class="value">{{ userInfo.username || '未设置' }}</span>
      </div>

      <!-- 性别 -->
      <div class="info-item">
        <span class="label">性别</span>
        <select v-if="editMode.userSex" v-model="userInfo.userSex" class="value select">
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
        <span v-else class="value">{{ userInfo.userSex == 0 ? '男' : '女' || '未设置' }}</span>
        <i v-if="!editMode.userSex" class="fa fa-pencil help-icon" @click="toggleEdit('userSex')"></i>
      </div>

      <!-- 个人简介 -->
      <div class="info-item">
        <span class="label">简介</span>
        <input v-if="editMode.userInfo" v-model="userInfo.userInfo" class="value input" type="text" />
        <span v-else class="value">{{ userInfo.userInfo || '一句话介绍自己' }}</span>
        <i v-if="!editMode.userInfo" class="fa fa-pencil help-icon" @click="toggleEdit('userInfo')"></i>
      </div>

      <!-- 生日 -->
      <div class="info-item">
        <span class="label">生日</span>
        <input
          v-if="editMode.userBirth"
          v-model="userInfo.userBirth"
          class="value input"
          type="date"
        />
        <span v-else class="value">{{ userInfo.userBirth || '填写生日完善信息' }}</span>
        <i
          v-if="!editMode.userBirth"
          class="fa fa-pencil help-icon"
          @click="toggleEdit('userBirth')"
        ></i>
      </div>
    </div>

    <!-- 提交修改按钮 -->
    <div v-if="isEditing" class="submit-button-section">
      <button @click="submitChanges">保存修改</button>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      editMode: {
        userSex: false,
        userInfo: false,
        userBirth: false
      },
      isEditing: false // 判断是否正在编辑
    };
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem("user"));
    if (user && user.username) {
      this.getUserInfo(user.username);
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo(username) {
      this.$http
        .get(`/users/profile`, { params: { username } })
        .then(res => {
          if (res.data.flag) {
            this.userInfo = res.data.object;
          } else {
            showToast({
              message: "获取个人信息失败",
              icon: "close"
            });
            alert("");
          }
        })
        .catch(err => {
          console.error("获取个人信息时出错", err);
          showToast({
            message: "获取个人信息失败，请重试",
            icon: "close"
          });
          alert("");
        });
    },

    // 切换编辑模式
    toggleEdit(field) {
      this.editMode[field] = !this.editMode[field];
      this.isEditing = Object.values(this.editMode).includes(true);
    },

    // 提交修改
    submitChanges() {
      // 发送 PUT 请求来更新用户信息
      this.$http
        .put(`/users/update`, this.userInfo)
        .then(res => {
          if (res.data.flag) {
            showToast({
              message: "修改成功",
              icon: "passed"
            });
            this.isEditing = false;
            // 重置编辑模式
            this.editMode = {
              userSex: false,
              userInfo: false,
              userBirth: false
            };
          } else {
            showToast({
              message: "修改失败",
              icon: "close"
            });
            console.log(this.userInfo); // 打印用户信息，确保数据正确
          }
        })
        .catch(err => {
          console.error("提交个人信息时出错", err);
          showToast({
            message: "提交失败，请稍后重试",
            icon: "close"
          });
          alert("");
        });
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 3.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

.back-button {
  position: fixed;
  top: 5vw; /* 根据需要调整高度 */
  left: 4vw; /* 给左边留出一定间距 */
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 4vw;
  z-index: 1000;
}

/* 标题样式 */


/* Profile Picture Section */
.profile-picture-section {
  margin-top: 16vw; /* 根据需要调整高度 */
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.profile-picture {
  margin-top: 10vw; /* 根据需要调整高度 */
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.profile-picture:hover {
  transform: scale(1.1);
}

.profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.camera-icon {
  position: absolute;
  bottom: 5px;
  right: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.camera-icon:hover {
  background-color: #4caf50;
}

.camera-icon i {
  font-size: 16px;
  color: #555;
}

/* Info Section */
.info-section {
  margin: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.info-section:hover {
  transform: translateY(-5px);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f1f1;
  font-size: 15px;
  color: #555;
  transition: background-color 0.3s ease;
}

.info-item:hover {
  background-color: #f9f9f9;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #888;
  font-weight: 500;
}

.value {
  color: #333;
  flex: 1;
  text-align: right;
  margin-right: 10px;
}

.help-icon,
.arrow-icon {
  font-size: 16px;
  color: #888;
  margin-left: 5px;
  cursor: pointer;
}

.help-icon:hover,
.arrow-icon:hover {
  color: #4caf50;
}

/* 添加浮动和阴影效果 */
.info-item:hover .help-icon,
.info-item:hover .arrow-icon {
  transform: translateX(5px);
  transition: transform 0.2s ease-in-out;
}

/* 按钮样式 */
button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

button:active {
  background-color: #388e3c;
}

/* 弹出动画 */
@keyframes popUp {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.info-section {
  animation: popUp 0.4s ease-out;
}

.input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 5px;
}

.select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 5px;
}

.submit-button-section {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
